<template>
	<video id="videoPlayer" class="video-player" :autoplay="true" controls :show-fullscreen-btn="false" :src="url"
		@play="playHandle">
		<cover-image class="back" :src="require('@/static/img/video-player/arrowLeft.png')" @tap="goBack"></cover-image>
	</video>
</template>

<script>
	let context = uni.createVideoContext('videoPlayer');
	export default {
		data() {
			return {
				url: ''
			}
		},
		onLoad(option) {
			this.url = option.url
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			playHandle() {
				context.requestFullScreen({
					direction: 0
				})
			}
		}
	}
</script>

<style scoped>
	.video-player {
		width: 100vw;
		height: 100vh;
	}

	.back {
		margin-top: var(--status-bar-height);
		padding: 30rpx;
		color: #FFFFFF;
		width: 20px;
		height: 20px;
	}
</style>
